<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>非单文件的组件的使用</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <!--
  Vue中使用组件的三大步奏
  (一):定义组件（创建组件）：Vue.extend(options)创建:注意data必须写成函数，如果写成对象别人用时修改对象（对象指向一个内存）里面的东西，自己的也会变，引起数据变化
                          使用template可以配置组件结构

                        定义组件的简写:
                        const school =Vue.extend({options}})可简写为const school = options

  (二):注册组件:
               1.局部注册:靠new Vue的时候传入components选项
               2.全局注册:靠Vue.component("组件名"，组件)

               注：组件的命名: 首字母大写小写都可以（school,School）
                   多个单词用“-” my-school
                 

  (三):使用组件（写组件标签）
-->

    <div id="root">
        <my-student></my-student>
        <aihao></aihao>
        <ai></ai>
    </div>


</body>

<script>
    //第一步:创建组件1
    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: "邓紫棋",
                age: 18
            }
        },
        methods: {
            showname() {
                alert(this.studentName)

            }
        }
    })

    //创建组件2
    const aihao = Vue.extend({
        template: `
        <div>
            <h2>爱好:{{stud}}</h2>
            <h2>哈哈哈:{{age}}</h2>
        </div>
        `,
        data() {
            return {
                stud: "喜欢邓紫棋",
                age: 30
            }
        }
    })

    //创建组件3
    const ai = Vue.extend({
        // name: 'weiweihao', //可通过name 在创建逐渐时定义组件名,但是不常用
        template: `
        <div>
            <h2>微微号:{{stud}}</h2>
            <h2>周杰伦:{{age}}</h2>
        </div>
        `,
        data() {
            return {
                stud: "喜欢邓紫棋",
                age: 30
            }
        }
    })


    //全局组件注册
    Vue.component("ai", ai)

    new Vue({
        el: "#root",
        data: {},

        //局部注册组件
        components: {
            "my-student": student,
            aihao

        }
    })
</script>

</html>